<template>
  <div class="process-set">
    <div class="set-head">
      <div class="label">考核流程：</div>
      <el-select
        v-model="emitData.assessFlow"
        placeholder="请选择"
        size="small"
        class="simple"
        @change="selectFun"
        :disabled="type === 'view'">
        <el-option
          v-for="item in processOptions"
          :key="item.value"
          :label="getLabel(item.label)"
          :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="set-content">
      <div class="left-con">
        <div v-for="(item, index) in emitData.chooseList" :key="item">
          <el-button type="primary" size="small">{{ processList[Number(item)].label }}</el-button>
          <span class="iconfont icon-pdjiantou_xia" v-if="index !== emitData.chooseList.length - 1"></span>
        </div>
        <!-- <el-button type="primary" size="small">季度总结</el-button>
        <span class="iconfont icon-pdjiantou_xia"></span>
        <el-button type="primary" size="small">一级评价</el-button>
        <span class="iconfont icon-pdjiantou_xia"></span>
        <el-button type="primary" size="small">民主测评</el-button>
        <span class="iconfont icon-pdjiantou_xia"></span>
        <el-button type="primary" size="small">二级评价</el-button>
        <span class="iconfont icon-pdjiantou_xia"></span>
        <el-button type="primary" size="small">加分项</el-button>
        <span class="iconfont icon-pdjiantou_xia"></span>
        <el-button type="primary" size="small">计分评等</el-button>
        <span class="iconfont icon-pdjiantou_xia"></span>
        <el-button type="primary" size="small">结果公示</el-button> -->
      </div>
      <div class="right-con">
        <!-- 季度总结 -->
        <div class="querter-sum right-box">
          <div class="box-tit">季度总结</div>
          <div class="box-item">
            <div class="box-label">执行人</div>
            <div class="box-con">被考核人</div>
          </div>
          <div class="box-tip">考核发起后，考核人员需完成填写季度总结，评价人才可对其进行完成评价</div>
        </div>
        <!-- 一级评价 -->
        <div class="one-eva right-box">
          <div class="box-tit">
            一级评价
            <span class="tit-tip">当执行人为多人时，所有人均需评价</span>
          </div>
          <div class="box-item">
            <div class="box-label">执行人</div>
            <div class="box-con">
              <el-checkbox v-model="checked" disabled>部门负责人/分管负责人</el-checkbox>
            </div>
            <div class="con-tip">根据被评价人角色进行匹配</div>
          </div>
          <div class="box-item">
            <div class="box-label">执行人待办名称</div>
            <div class="box-con">
              <div class="con-item">
                <span>考核周期</span>
                <span>+部门负责人评价待办（工作人员）</span>
              </div>
              <div class="con-item">
                <span>考核周期</span>
                <span>+分管负责人评价待办（负责人）</span>
              </div>
            </div>
          </div>
          <div class="box-item">
            <div class="box-label">历史评价结果展示</div>
            <div class="box-con">
              <el-switch
                v-model="emitData.switchLink3"
                active-value="1"
                inactive-value="0"
                :disabled="type === 'view'"></el-switch>
            </div>
          </div>
        </div>
        <!-- 民主测评 -->
        <div class="minzhu-eva right-box" v-if="emitData.chooseList.includes('2')">
          <div class="box-tit">民主测评</div>
          <div class="box-item">
            <div class="box-label">执行人</div>
            <div class="box-con">
              <el-checkbox v-model="checked" disabled>参会人员</el-checkbox>
              <div class="con-tip">建立民主测评时增加</div>
            </div>
          </div>
        </div>
        <!-- 二级评价 -->
        <div class="second-eva right-box">
          <div class="box-tit">二级评价</div>
          <div class="box-item">
            <div class="box-label">执行人</div>
            <div class="box-con">被考核人</div>
          </div>
          <div class="box-item">
            <div class="box-label">执行人待办名称</div>
            <div class="box-con">
              <div class="con-item">
                <span>考核周期</span>
                <span>+部门负责人评价待办（工作人员）</span>
              </div>
              <div class="con-item">
                <span>考核周期</span>
                <span>+分管负责人评价待办（负责人）</span>
              </div>
            </div>
          </div>
          <div class="box-item">
            <div class="box-label">历史评价结果展示</div>
            <div class="box-con">
              <el-switch
                v-model="emitData.switchLink4"
                active-value="1"
                inactive-value="0"
                :disabled="type === 'view'"></el-switch>
            </div>
          </div>
          <div class="box-item">
            <div class="box-label">一级评价结果是否自动带入下级评价</div>
            <div class="box-con">
              <el-switch
                v-model="emitData.switchLink"
                active-value="1"
                inactive-value="0"
                :disabled="type === 'view'"></el-switch>
            </div>
          </div>
        </div>
        <!-- 加分项 -->
        <div class="add-score right-box" v-if="emitData.chooseList.includes('4')">
          <div class="box-tit">加分项</div>
          <div class="box-tip">考核发起后，管理人员（负责人）需完成加分项申报工作，并审核通过，分值纳入考核总分中</div>
        </div>
        <!-- 计分评等 -->
        <div class="sum-eva right-box">
          <div class="box-tit">计分评等</div>
          <div class="box-item">
            <div class="box-label">考核得分</div>
            <div class="box-con">
              <div class="rule_con">
                <div class="con_top">
                  <div class="con_li">
                    <div class="li_label">一级评价得分</div>
                    <div class="li_con">
                      <el-input
                        size="small"
                        v-model="emitData.countRule1"
                        class="simple"
                        @input="filterNonNumeric('1')"
                        :disabled="formData.isDisabled || type === 'view'"></el-input>
                      <span>%</span>
                    </div>
                  </div>
                  <template v-if="isMinZhu">
                    <div class="line">+</div>
                    <div class="con_li">
                      <div class="li_label">民主测评得分</div>
                      <div class="li_con">
                        <el-input
                          size="small"
                          v-model="emitData.countRule2"
                          class="simple"
                          @input="filterNonNumeric('2')"
                          :disabled="formData.isDisabled || type === 'view'"></el-input>
                        <span>%</span>
                      </div>
                    </div>
                  </template>
                  <div class="line">+</div>
                  <div class="con_li">
                    <div class="li_label">二级评价得分</div>
                    <div class="li_con">
                      <el-input
                        size="small"
                        v-model="emitData.countRule3"
                        class="simple"
                        @input="filterNonNumeric('3')"
                        :disabled="formData.isDisabled || type === 'view'"></el-input>
                      <span>%</span>
                    </div>
                  </div>

                  <div class="con_total">
                    <div class="box" ref="top_box"></div>
                    <div class="total">
                      <span class="num">= {{ total }} %</span>
                      <span class="tip">默认选项之和为 100</span>
                    </div>
                  </div>
                </div>
                <template v-if="emitData.chooseList.includes('4')">
                  <div class="line">+</div>
                  <div class="con_li">
                    <div class="li_label">加分项评分：</div>
                    <div class="li_con">
                      <el-input
                        size="small"
                        v-model="emitData.countRule4"
                        class="simple"
                        @input="filterNonNumeric('4')"
                        :disabled="formData.isDisabled || type === 'view'"></el-input>
                      <span>%</span>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <!-- 结果公示 -->
        <div class="result-pub right-box">
          <div class="box-tit">结果公示</div>
          <div class="box-item">
            <div class="box-label">等次公示方式</div>
            <div class="box-con">
              <el-radio v-model="emitData.radioLink2" label="0" :disabled="type === 'view'">自动公示</el-radio>
              <el-radio v-model="emitData.radioLink2" label="1" :disabled="type === 'view'">手动公示</el-radio>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProcessSet',
  components: {},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {
          switchLink: '',
          countRule1: '',
          countRule2: '',
          countRule3: '',
          countRule4: '',
          radioLink2: '',
          switchLink3: '',
          switchLink4: '',
          assessFlow: '',
        }
      },
    },
  },
  data() {
    return {
      emitData: {
        chooseList: ['0', '1', '2', '3', '4', '5', '6'],
        switchLink: '',
        countRule1: '',
        countRule2: '',
        countRule3: '',
        countRule4: '',
        radioLink2: '',
        switchLink3: '',
        switchLink4: '',
        assessFlow: '0',
      },
      processOptions: [
        {
          value: '0',
          label: '0+1+2+3+4+5+6',
        },
        {
          value: '1',
          label: '0+1+3+4+5+6',
        },
        {
          value: '2',
          label: '0+1+3+5+6',
        },
      ],
      checked: true,
      value: true,
      processList: [
        {
          value: 0,
          label: '季度总结',
        },
        {
          value: 1,
          label: '一级评价',
        },
        {
          value: 2,
          label: '民主测评',
        },
        {
          value: 3,
          label: '二级评价',
        },
        {
          value: 4,
          label: '加分项',
        },
        {
          value: 5,
          label: '计分评等',
        },
        {
          value: 6,
          label: '结果公示',
        },
      ],
      type: '',
    }
  },
  watch: {
    formData: {
      handler(news) {
        this.emitData = Object.assign(this.emitData, news)
        if (!this.emitData.assessFlow) {
          this.emitData.assessFlow = '0'
        }
        this.selectFun()
        console.log('this.emitData :>> ', this.emitData)
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    total() {
      return Number(this.emitData.countRule1) + Number(this.emitData.countRule2) + Number(this.emitData.countRule3)
    },
    isMinZhu() {
      return this.emitData.chooseList.includes('2')
    },
  },
  created() {},
  mounted() {
    this.type = this.$route.query.type || ''
    this.resize()
  },
  methods: {
    filterNonNumeric(num) {
      // 限制输入数字 最大值 100 最小值0
      const str = 'countRule' + num
      this.emitData[str] = this.emitData[str].replace(/\D/g, '')
      if (Number(this.emitData[str]) > 100) {
        this.emitData[str] = 100
      }
      if (Number(this.emitData[str]) < 0) {
        this.emitData[str] = 0
      }
    },
    toEmit(id) {
      const param = {
        ...this.emitData,
        step: id || '',
      }
      this.$emit('reviewData', param)
    },
    getLabel(label) {
      const arr = label.split('+')
      const list = []
      arr.forEach(item => {
        list.push(this.processList[Number(item)].label)
      })
      return list.join('+')
    },
    selectFun() {
      const arr = this.processOptions[Number(this.emitData.assessFlow)].label.split('+')
      this.emitData.chooseList = arr
      if (!arr.includes('2')) {
        this.emitData.countRule2 = ''
      }
      if (!arr.includes('4')) {
        this.emitData.countRule4 = ''
      }
      this.resize()
    },
    resize() {
      this.$nextTick(() => {
        const el = document.querySelector('.con_top').getBoundingClientRect()
        const height = el.height
        this.$refs.top_box.style.height = height + 'px'
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.process-set {
  flex: 1;
  width: 100%;
  height: 100%;
  .set-head {
    display: flex;
    align-items: center;
    .el-select {
      width: 500px;
    }
  }
  .set-content {
    margin-top: 10px;
    height: calc(100% - 40px);
    display: flex;
    align-items: flex-start;
    .left-con {
      width: 260px;
      padding: 20px 0;
      height: calc(100% - 20px);
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      overflow-y: auto;
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .el-button {
        margin: 5px 0;
      }
      .icon-pdjiantou_xia {
        color: #2b78f1;
      }
    }
    .right-con {
      padding: 20px;
      width: calc(100% - 260px);
      height: calc(100% - 20px);
      overflow-y: auto;
      border-left: 1px solid #e4eaf0;
      .right-box {
        border: 1px solid #e4eaf0;
        padding: 10px;
        border-radius: 10px;
        margin-top: 10px;
        &:first-child {
          margin-top: 0;
        }
        .box-tit {
          font-weight: bold;
          .tit-tip {
            font-weight: normal;
            color: #999999;
            font-size: 12px;
          }
        }
        .box-item {
          display: flex;
          align-items: center;
          margin-top: 15px;
          .box-label {
            margin-right: 20px;
          }
          .box-con {
            display: flex;
            align-items: center;
            .con-item {
              border: 1px solid #e4eaf0;
              margin: 0 10px;
              padding: 8px 12px;
              border-radius: 5px;
              span:first-child {
                color: #2b78f1;
              }
            }
          }
          .con-tip {
            font-size: 12px;
            color: #d9001b;
            margin-left: 10px;
          }
        }
        .box-tip {
          color: #999999;
          margin-top: 10px;
        }
      }
      .sum-eva {
        .box-item {
          align-items: flex-start;
          .box-con {
            .rule_con {
              display: flex;
              align-items: center;
              flex-direction: column;
              padding-right: 250px;
              /deep/.el-input {
                width: 100px;
                margin: 0 5px;
              }
              .con_li {
                display: flex;
                align-items: center;
                .li_label {
                  width: 120px;
                  text-align: right;
                }
              }
              .line {
                margin: 20px 0;
                text-align: center;
              }
              .con_top {
                position: relative;
                .con_total {
                  position: absolute;
                  right: -200px;
                  top: 0;
                  display: flex;
                  align-items: center;
                  .box {
                    border: 1px solid #d0d0d0;
                    border-left: none;
                    height: 150px;
                    width: 20px;
                  }
                  .total {
                    display: flex;
                    flex-direction: column;
                    margin-left: 20px;
                    .num {
                      font-size: 20px;
                    }
                    .tip {
                      color: #999999;
                      margin-top: 10px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
